<template >
	<div class="contain-report">
		<div class="report-title">案例查询</div>
		<div class="report-nav">
			<div class="nav-box">
				<p style="margin-top: 10px">共计提交案例</p>
				<p style="text-align: center;margin-top: 10%;font-size: 26px;">{{userSub.allNum}} <i style="font-size: 15px">份</i></p>
			</div>
			<div class="nav-box" >
				<p style="margin-top: 10px">今日提交案例</p>
				<p style="text-align: center;margin-top: 10%;font-size: 26px;">{{userSub.todayNum}} <i style="font-size: 15px">份</i></p>
			</div>
			<div class="nav-box">
				<p style="margin-top: 10px">共计提交人数</p>
				<p style="text-align: center;margin-top: 10%;font-size: 26px;">{{userSub.personNum}} <i style="font-size: 15px">人</i></p>
			</div>
			<div class="nav-box">
				<p style="margin-top: 10px">我提交了案例</p>
				<p style="text-align: center;margin-top: 10%;font-size: 26px;">{{userSub.myNum}} <i style="font-size: 15px">份</i></p>
			</div>
		</div>
		<div class="report-search">
			<p :style="form.day === 0 ? 'color: #009cd2' : '' " @click="changeDay(0)">全部</p>
			<p :style="form.day === 1 ? 'color: #009cd2' : '' "  @click="changeDay(1)">今日</p>
			<p :style="form.day === 2 ? 'color: #009cd2' : '' "  @click="changeDay(2)">本周</p>
			<p :style="form.day === 3 ? 'color: #009cd2' : '' "  @click="changeDay(3)">本月</p>
			<p style="margin-right: 20px" :style="form.day === 4 ? 'color: #009cd2' : '' "  @click="changeDay(4)">全年</p>
      <el-select placeholder="请选择案例类别" @change="getList" clearable @close="form.recipeClassId = null"
                 v-model="form.recipeClassId"  size="small" style="width: 300px;margin-right: 20px">
        <el-option
            v-for="item in cateGoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        >
        </el-option>
      </el-select>
			<el-date-picker
					v-model="time"
					@change="changeDate"
					clearable
					size="small"
					style="width: 300px;margin-right: 10px"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd" >
			</el-date-picker>
			<el-select placeholder="请选择实验室" @change="getList" clearable @close="form.laboratoryId = null" v-model="form.laboratoryId" size="small" style="width: 200px;margin-right: 10px">
				<el-option
						v-for="item in laboratory"
						:key="item.id"
						:label="item.laboratoryName"
						:value="item.id"
				>
				</el-option>
			</el-select>
			<el-input
					size="small"
					style="width: 200px"
					placeholder="请输入"
					clearable
					@clear="getList"
					v-model="form.name"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchList"></i>
			</el-input>
		</div>
		<div class="report-list" v-if="list.length !== 0" v-for="item in list" :key="item.id">
			<div class="list-box">
				<h3 style="margin-bottom: 10px">{{item.name}}</h3>
				<span style="color: #999">{{item.description}}</span>
			</div>
			<div class="right">
				<div class="right-content">
					<span style="margin-bottom: 10px">实验室:</span>
					<span>{{item.laboratoryName}}</span>
				</div>
        <div class="right-date">
          <span style="margin-bottom: 10px">案例类型:</span>
          <span>{{item.recipeClassName}}</span>
        </div>
				<div class="right-date">
					<span style="margin-bottom: 10px">上传时间:</span>
					<span>{{item.createTime}}</span>
				</div>
				<div class="right-content">
					<span style="margin-bottom: 10px">版本:</span>
					<span>{{item.versionNumber}}</span>
				</div>
				<div class="btns">
<!--					<el-button type="text" @click="useCase(item.id)">使 用 模 板</el-button>-->
					<el-button type="text" @click="downloadFile(item.url)">下 载</el-button>
					<el-button type="text" @click="openEdit(item)">查 看</el-button>
				
				</div>
			</div>
		</div>
		<div class="report-nolist" v-if="list.length === 0">
			<el-empty description="暂无数据"></el-empty>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[3]"
					:page-size="3"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		
		<el-dialog
				:show-close="false"
				:visible.sync="editDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">查看案例</div>
				<div class="box-body">
					<el-form label-width="80px">
						<el-form-item label="报告名称:">
							<el-input placeholder="请输入报告名称" disabled v-model="editForm.name"></el-input>
						</el-form-item>
						<el-form-item label="报告描述:">
							<el-input type="textarea" disabled v-model="editForm.description" placeholder="请输入报告描述(可选)" :rows="3"></el-input>
						</el-form-item>
            <el-form-item label="案例类别">
              <el-select
                  v-model="editForm.recipeClassId"  disabled style="width: 100%">
                <el-option
                    v-for="item in cateGoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
						<el-form-item label="实验室:">
							<el-select placeholder="请选择实验室" disabled v-model="editForm.laboratoryId" style="width: 100%">
								<el-option
										v-for="item in laboratory"
										:key="item.id"
										:label="item.laboratoryName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
            <el-form-item>
              <el-button type="text" @click="openUrl(editForm.url,editForm.id)">查看文件</el-button>
            </el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button size="small" @click="editDialog = false">关 闭</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
    <el-drawer
        size='50%'
        close-on-press-escape
        :visible.sync="dialog"
        :with-header="false">
      <div class="docWrap" v-if="showFile === 0">
        <!-- 预览文件的地方（用于渲染） -->
        <div ref="file"></div>
      </div>
      <iframe :src="fileUrl" v-if="showFile === 1" style="width: 100%;height: 100%"></iframe>
    </el-drawer>
	</div>
</template >

<script >
   import {allCase,caseNum } from "../../api/case";
	import { laboratoryList } from "../../api/notice";
   import {getRecipeClassFindList} from "@/api/laboratory";
   let docx = require("docx-preview");
   import request from "../../utils/request";

   export default {
        name: "report",
        data(){
            return{
              dialog:false,
              showFile:null,
              fileUrl:'',
              cateGoryList:null,
                disabled:false,
                fileTitle:'',
                editDialog:false,
                editForm:{
                    description: "",
                    laboratoryId: null,
                    name: "",
                    reportId: null,
                    url: ""
                },
                //实验室集合
                laboratory:[],
                time:null,
                userSub:{},
                //接口data
                form:{
                  recipeClassId:null,
                    day: 0,
                    endTime: "",
                    laboratoryId: null,
                    name: "",
                    pageIndex: 1,
                    pageSize: 3,
                    startTime: "",
                    type:2
                },
                total:null,
                list:[]
            }
        },
        mounted() {
            this.getLaboratory()
            this.getList()
            this.getReportNum()
          this.getcateGoryList()
        },
        methods: {
            //查询实验室
            async getLaboratory(){
                const { data } = await laboratoryList()
                if (data.code === 200){
                    this.laboratory = data.data
                }
            },
          openUrl(url, id) {
            console.log(url)
            this.seeDialog = false

            let parts = url.split(".");
            let extension = parts[parts.length - 1];
            console.log(extension)
            if (extension === 'docx' || extension === 'DOCX') {
              this.dialog = true
              this.showFile = 0
              request({
                url: "/upload/getRecipe/" + id,
                method: 'get',
                responseType: 'blob',
              }).then(resp => {
                docx.renderAsync(resp.data, this.$refs.file); // 渲染到页面
              })
            } else if (extension === 'doc' || extension === 'DOC') {
              this.downloadFile(url)
            } else {
              this.dialog = true
              this.showFile = 1
              this.fileUrl = url
            }

          },
          async getcateGoryList() {
            const {data} = await getRecipeClassFindList()
            console.log(data)
            if (data.code === 200) {
              this.cateGoryList = data.data
            }
          },
            //报告列表
            async getList(){
                const { data } = await allCase(this.form)
                if (data.code === 200){
                    console.log(data.data)
                    this.list = data.data.data
                    this.total = data.data.total
                }
            },
            async getReportNum(){
                const { data } = await caseNum()
                if (data.code === 200){
                    this.userSub = data.data
                }
            },
            changeDate(val){
                if (val){
                    this.form.startTime = val[0]
                    this.form.endTime = val[1]
                }else {
                    this.form.startTime = ''
                    this.form.endTime = ''
                }

                this.getList()
            },
            changeDay(val){
                this.form.day = val
                this.getList()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            },
            searchList(){
                if (!this.form.name){
                    this.$message.warning('请输入报告名称')
                }else {
                    this.getList()
                }
            },
            useCase(id){
                this.$confirm('使用该案例, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message.warning('已取消使用')
                })
            },
            downloadFile(url){
                if (!url){
                    this.$message.error('暂无报告文件')
                }else {
                    this.$confirm('下载该案例, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.open(url, '_self')
                    })
                }
            },
            openEdit(item){
                this.editDialog = true
                console.log(item)
                this.editForm = item
            }
        },
    }
</script >

<style scoped lang="less">
	.contain-report{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-title{
			font-size: 22px;
			color: #666;
		}
		.report-nav{
			width: 100%;
			margin: 20px 0;
			display: flex;
			justify-content: space-between;
			.nav-box{
				width: 20%;
				height: 150px;
				border-radius: 10px;
				overflow: hidden;
				padding: 20px;
				box-sizing: border-box;
				background-color: #fff;
				
				&:hover{
					cursor: pointer;
					transform: translateY(-5px);
					transition: all 1s ease;
				}
			}
		}
		.report-search{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			p{
				margin: 0 10px;
				box-sizing: border-box;
				&:hover{
					cursor: pointer;
				}
			}
		}
		.report-list{
			width: 100%;
			margin: 20px 0;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 5px 0 #ccc;
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list-box{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
			}
			.right{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right-content{
					width: 10%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.right-date{
					width: fit-content;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.btns{
					width: 40%;
					padding: 0 5%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
				}
			}
			
		}
		.report-nolist{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
